<template>
  <el-form-item
    :label="labelValue"
    prop="officeId"
  >
    <el-select
      v-model="officeId"
      filterable
      clearable
      reserve-keyword
      :loading="loadingIns"
      :disabled="isDisable"
      :placeholder="placeHolderValue"
      @change="officeIdChange"
    >
      <el-option
        v-for="item in pickOfficeList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>

import OfficeApi from '@/api/institution/office';

  export default{
    // 父组件参数
    props: {
      site: {
        type: Number,
        default: 1  // 1.新增/修改  2.查询
      },
      hospitalId: {
        type: Number,
        default: null
      },
      institutionId: {
        type: Number,
        default: null
      },
      id: {
        type: Number,
        default: null
      },
      isDisable: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return {
        officeId: null,
        loadingIns: false,
        labelValue: '',
        placeHolderValue: '',
        pickOfficeList: []
      }
    },
    watch: {
      hospitalId(val) {
        if (val){
          this.listOffice(val,null)
        }
      },
      institutionId(val) {
        if (val){
          this.listOffice(null,val)
        }
      },
      id(val) {
        this.officeId = val
      }
    },
    components: {},
    methods: {
      listOffice (hospitalId,institutionId) {
        let _this = this
        _this.loadingIns = true
        let cond = {
          hospitalId: hospitalId,
          institutionId: institutionId
        }
        OfficeApi.getOfficeNames(cond)
          .then(res => {
            setTimeout(() => {
              _this.loadingIns = false
              _this.pickOfficeList = res.data.map(item => {
                return {
                  value: item.officeId,
                  label: item.officeName
                }
              })
            }, 200)
          })
          .catch(error => {
            _this.pickOfficeList = []
            console.error(error)
          })
      },
      officeIdChange(val) {
        this.$emit('officeId', val)
      }
    },
    created() {
      this.officeId = this.id
      if (this.site === 1){
        this.labelValue = '科室名称'
        this.placeHolderValue = '请选择科室'
      }else if (this.site === 2){
        this.labelValue = ''
        this.placeHolderValue = '科室名称'
      }
    }
  }
</script>
